.d-none {
  display: none;
}

.d-inline {
  display: inline;
}

.d-ib {
  display: inline-block;
}

/* flex 布局 */
.d-flex {
  display: flex;
}

.fd-row {
  flex-direction: row;
}

.fd-column {
  flex-direction: column;
}

.jc-sb {
  justify-content: space-between;
}

.jc-center {
  justify-content: center;
}

.ai-center {
  align-items: center;
}

.as-center {
  align-self: center;
}

.fw-wrap {
  flex-wrap: wrap;
}

.fw-nowrap {
  flex-wrap: nowrap;
}

.fsh-0 {
  flex-shrink: 0;
}

.f-1 {
  flex: 1;
}

.f-2 {
  flex: 2;
}

.f-3 {
  flex: 3;
}

.f-4 {
  flex: 4;
}

/* 基于flex布局 */
.col-1 {
  flex: 0 0 100%;
}

.col-2 {
  flex: 0 0 50%;
}

.col-3 {
  flex: 0 0 33.3333%;
}

.col-4 {
  flex: 0 0 25%;
}

.col-5 {
  flex: 0 0 20%;
}

/* 宽，高 */
.w-40 {
  width: 40px;
}

.mw-200 {
  max-width: 200px;
}

.miw-200 {
  min-width: 200px;
}

.h-40 {
  height: 40px;
}

.mh-40 {
  max-height: 40px;
}

.mih-400 {
  min-height: 400px;
}



/* 外边距 */
.m-10 {
  margin: 10px;
}

.mt-10 {
  margin-top: 10px;
}

.mr-10 {
  margin-right: 10px;
}

.mb-10 {
  margin-bottom: 10px;
}

.ml-10 {
  margin-left: 10px;
}

/* 内边距 */
.p-10 {
  padding: 10px;
}

.pt-10 {
  padding-top: 10px;
}

.pr-10 {
  padding-right: 10px;
}

.pb-10 {
  padding-bottom: 10px;
}

.pl-10 {
  padding-left: 10px;
}

/* 隐藏、滚动 */
.o-auto {
  overflow: auto;
}

.o-scroll {
  overflow: scroll;
}

.o-hidden {
  overflow: hidden;
}

.ox-hidden {
  overflow-x: hidden;
}

.oy-hidden {
  overflow-y: hidden;
}

/* 滚动条样式：横向，纵向，滚动样式 */
.ox-auto {
  overflow-x: auto;
  overflow-y: hidden;
}

.oy-auto {
  overflow-y: auto;
  overflow-x: hidden;
}

.ox-auto::-webkit-scrollbar,
.oy-auto::-webkit-scrollbar {
  width: 5px;
  background-color: #F5F5F5;
}

.ox-auto::-webkit-scrollbar-track,
.oy-auto::-webkit-scrollbar-track {
  border-radius: 5px;
  background-color: transparent;
}

.ox-auto::-webkit-scrollbar-thumb,
.oy-auto::-webkit-scrollbar-thumb {
  background-color: #dadada;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  cursor: pointer;
}

.ox-auto::-webkit-scrollbar-thumb:hover,
.oy-auto::-webkit-scrollbar-thumb:hover {
  background-color: #bbbbbb;
}

.f-left {
  float: left;
}

.f-right {
  float: right;
}

.f-clear::after {
  clear: both;
  content: "";
  display: block;
  width: 0;
  height: 0;
}

.va-top {
  vertical-align: top;
}

.va-middle {
  vertical-align: middle;
}

.va-bottom {
  vertical-align: bottom;
}

/* 内容颜色 */
.c-00060 {
  color: #00000060;
}

.c-333 {
  color: #333;
}

.c-666 {
  color: #666;
}

.c-999 {
  color: #999;
}

.c-aaa {
  color: #aaa;
}

.c-eee {
  color: #eee;
}

/* 背景颜色 */

.bc-000 {
  background-color: #000;
}

.bc-fff {
  background-color: #fff;
}

/* 文字样式 */
.fw-bold {
  font-weight: bold;
}

.fw-normal {
  font-weight: normal;
}

/* 文字样式，是否换行 */
.ws-nowrap {
  white-space: nowrap;
}

.ws-pw {
  white-space: pre-wrap;
}

/* 中，英，数 换行 */
.w-warp {
  word-break: break-word;
  word-wrap: break-word;
  word-break: break-all;
}

/* 文字样式-字体大小 */
.fs-12 {
  font-size: 12px;
}

.fs-14 {
  font-size: 14px;
}

.fs-16 {
  font-size: 16px;
}

/* 文字隐藏 */
.to-ell {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
}

/* 一行 */
.lc-1 {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.lc-2 {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.lc-3 {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.lc-4 {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.lc-5 {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

/* 边框-1px 颜色 */
.b-eee {
  border: 1px #eee solid;
}

.bb-eee {
  border-bottom: 1px #eee solid;
}

.bt-eee {
  border-top: 1px #eee solid;
}

/* 边框-粗细 */
.bw-2 {
  border-width: 2px;
}

/* 边框-样式 */
.bs-dotted {
  border-style: dotted;
}

/* 边框-透明 */
.btc-t {
  border-top-color: transparent;
}

.brc-t {
  border-right-color: transparent;
}

.bbc-t {
  border-bottom-color: transparent;
}

.blc-t {
  border-left-color: transparent;
}

/* 圆角 */
.br-10 {
  border-radius: 10px;
}

.br-15 {
  border-radius: 15px;
}

.btlr-10 {
  border-top-left-radius: 10px;
}

.btrr-10 {
  border-top-right-radius: 10px;
}

.bblr-10 {
  border-bottom-left-radius: 10px;
}

.bbrr-10 {
  border-bottom-right-radius: 10px;
}